<script setup>
import {ref, onMounted} from 'vue';
import axios from 'axios';
import {message} from 'ant-design-vue';
import {useRouter} from "vue-router";

const router = useRouter();
const current = ref(1);
const total = ref(0);
const pageSize = ref(10);
const houseList = ref([]);
const token = localStorage.getItem("access-token");
const typeValue = sessionStorage.getItem("typeValue");
console.log(typeValue)
// 获取快速展示列表
const getCollections = async () => {
  try {
    const response = await axios.get(`${window.link}/house/pageItem/${typeValue}`, {
      headers: {
        "access-token": token
      },
      params: {
        current: current.value,
        size: pageSize.value
      }
    });

    if (response.data.code === 200) {
      console.log(response);
      houseList.value = response.data.data.records;
      total.value = response.data.data.total;
    } else {
      message.error("获取快速搜索失败");
    }
  } catch (error) {
    console.error("获取快速搜索失败", error);
    message.error("获取快速搜索失败");
  }
};

// 分页改变
const onChange = async (page, size) => {
  current.value = page;
  pageSize.value = size;
  await getCollections();
};

// 页码改变
const onShowSizeChange = async (page, size) => {
  current.value = page;
  pageSize.value = size;
  await getCollections();
};

// 组件挂载时获取数据
onMounted(() => {
  getCollections();
});

const handleClick = (id) => {
  sessionStorage.setItem("houseId", id);
  router.push("/house");
};

const videoExtensions = ['mp4', 'webm', 'ogg']
const isVideo = (url) => {
  const extension = url.split('.').pop().toLowerCase()
  return videoExtensions.includes(extension)
}
</script>
<template>
  <div class="min-h-screen  bg-gray-50">
    <div class="w-[1400px] mx-auto py-8 px-4">
      <div class="bg-white rounded-lg shadow-sm p-6 " >
        <div class="relative h-[500px] w-full overflow-hidden" v-if="typeValue == 0">
          <img src="http://192.168.137.100:9000/other/5-5.jpg"
               class="w-full h-full object-cover object-center" alt="精装公寓">
          <div class="absolute inset-0 bg-gradient-to-r from-black/60 to-transparent">
            <div class="container mx-auto px-8 h-full flex flex-col justify-center">
              <h1 class="text-5xl font-bold text-white mb-4">品质生活 精致空间</h1>
              <p class="text-xl text-white/90">城市核心区 尊贵精装办公空间</p>
            </div>
          </div>
        </div>
        <div class="relative h-[500px] w-full overflow-hidden" v-if="typeValue == 1">
          <img src="http://192.168.137.100:9000/other/2-2.jpg"
               class="w-full h-full object-cover object-center" alt="地铁房源">
          <div class="absolute inset-0 bg-gradient-to-r from-black/60 to-transparent">
            <div class="container mx-auto px-8 h-full flex flex-col justify-center">
              <h1 class="text-5xl font-bold text-white mb-4">便捷交通 品质生活</h1>
              <p class="text-xl text-white/90">地铁0距离 生活更轻松</p>
            </div>
          </div>
        </div>
        <div class="relative h-[500px] w-full overflow-hidden" v-if="typeValue == 2">
          <img src="http://192.168.137.100:9000/other/3-3.jpg"
               class="w-full h-full object-cover object-center" alt="品质豪宅">
          <div class="absolute inset-0 bg-gradient-to-r from-black/60 to-transparent">
            <div class="container mx-auto px-8 h-full flex flex-col justify-center">
              <h1 class="text-5xl font-bold text-white mb-4">尊贵人生 品质生活</h1>
              <p class="text-xl text-white/90">独享私密花园 尽显尊贵身份</p>
            </div>
          </div>
        </div>
        <div class="relative h-[500px] w-full overflow-hidden" v-if="typeValue == 3">
          <img src="http://192.168.137.100:9000/other/1-1.jpg"
               class="w-full h-full object-cover object-center" alt="商铺办公">
          <div class="absolute inset-0 bg-gradient-to-r from-black/60 to-transparent">
            <div class="container mx-auto px-8 h-full flex flex-col justify-center">
              <h1 class="text-5xl font-bold text-white mb-4">商务办公 精英选择</h1>
              <p class="text-xl text-white/90">核心商圈 配套完善</p>
            </div>
          </div>
        </div>
        <div class="relative h-[500px] w-full overflow-hidden" v-if="typeValue == 4">
          <img src="http://192.168.137.100:9000/other/4-4.jpg"
               class="w-full h-full object-cover object-center" alt="优质合租">
          <div class="absolute inset-0 bg-gradient-to-r from-black/60 to-transparent">
            <div class="container mx-auto px-8 h-full flex flex-col justify-center">
              <h1 class="text-5xl font-bold text-white mb-4">品质合租 潮流生活</h1>
              <p class="text-xl text-white/90">志同道合 轻松社交</p>
            </div>
          </div>
        </div>
        <!-- 标题 -->
        <h1 class="text-xl font-medium mb-6"></h1>
        <!-- 房源列表 -->
        <div class="space-y-4">
          <div v-for="item in houseList" :key="item.id"
               class="flex bg-white border rounded-lg p-4 hover:shadow-md transition-shadow">
            <!-- 图片部分 -->
            <div class="w-48 h-32 overflow-hidden rounded-lg mr-4">
              <img v-if="!isVideo(item.graphUrl)" :src="item.graphUrl" class="w-full h-full object-cover" :alt="item.title"/>
              <video v-else :src="item.graphUrl" controls
                     class="w-full h-full object-cover"></video>
            </div>
            <!-- 信息部分 -->
            <div class="flex-1 ">
              <h3 class="text-lg font-medium mb-2 hover:text-blue-300 cursor-pointer" @click="handleClick(item.id)">
                {{ item.title }}</h3>
              <div class="text-sm text-gray-500 mb-2">
                {{ item.district }} · {{ item.layout }} · {{ item.area }}㎡
              </div>
              <div class="flex justify-between items-center mt-4">
                <span class="text-orange-500 text-lg font-medium">{{ item.rent }}元/月</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 分页 -->
        <div class="flex justify-between items-center mt-6">
          <span class="text-gray-500">共 {{ total }} 条</span>
          <a-pagination
              v-model:current="current"
              :total="total"
              :pageSize="pageSize"
              show-size-changer
              @change="onChange"
              @showSizeChange="onShowSizeChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>


<style scoped>
.ant-tag {
  border: none;
  padding: 2px 12px;
  border-radius: 4px;
}
</style>
